<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">团长姓名</text>
			<input class="input" type="text" v-model="colonelInfoData.name" placeholder="团长姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">身份证号</text>
			<input class="input" type="number" v-model="colonelInfoData.idCardNumber" placeholder="身份证号码"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">自取点名称</text>
			<input class="input" type="text" v-model="colonelInfoData.storeName" placeholder="店铺名称"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">自取点所在地区</text>
			<input @click="chooseArea" class="input" type="text" v-model="colonelInfoData.area" placeholder="省、市、区、街道"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">自取点地址</text>
			<input class="input" type="text" v-model="colonelInfoData.mapAddress" placeholder="店铺地址"
				placeholder-class="placeholder" />
			<text @click="chooseLocation" class="yticon icon-shouhuodizhi"></text>
		</view> 
		<view class="row b-b">
			<text class="tit">自取点详细地址</text>
			<input class="input" type="text" v-model="colonelInfoData.address" placeholder="自取点详细地址(具体到门牌号)"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b" style="height: 103px;">
			<text class="tit">身份证正面</text>
			<upload @conceal="getfronturl" style="margin-left: 20upx;" v-model="colonelInfoData.idCardFrontUrl"></upload>
		</view>
		<view class="row b-b" style="height: 103px;">
			<text class="tit">身份证反面</text>
			<upload  @conceal="getrevurl" style="margin-left: 20upx;" v-model="colonelInfoData.idCardReverseUrl"></upload>
		</view>
		<view class="row b-b" style="height: 103px;">
			<text class="tit">自取点照片</text>
			<upload @conceal="geturl" style="margin-left: 20upx;" v-model="colonelInfoData.storeUrl"></upload>
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<region-window ref="region" @conceal="finish"></region-window>
	</view>
</template>

<script>
	import {AddColonel} from "../../server/colonel.js"
	import upload from "@/components/wsl-img/zw-upload-img.vue"
	import regionWindow from '@/components/region-window/index.vue'
	export default {
		data() {
			return {
				colonelInfoData: {
					name: '',
					city:'',
					province:'',
					region:'',
					address:'',
					addressName:'',
					mapAddress:'',
					storeName:'',
					idCardNumber: '',
					storeUrl: 'http://192.168.31.113/media/image/2021/0924/12/1441252527352975360.jpg',
					idCardFrontUrl: 'http://192.168.31.113/media/image/2021/0924/12/1441252527352975360.jpg',
					idCardReverseUrl: 'http://192.168.31.113/media/image/2021/0924/12/1441252527352975360.jpg',
					latitude:'',
					longitude:'',
					area:''
				}
			}
		},
		onLoad(option) {
			console.log(option);
			let title = '团长信息新增';
			if (option.type === 'edit') {
				title = '编辑团长信息'
		
				this.colonelInfoData = JSON.parse(option.data)
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		components:{
			upload,
			regionWindow
		},
		methods: {
			switchChange(e) {
				this.colonelInfoData.default = e.detail;
			},
			//所在地区选择
			finish(param) {							
				this.colonelInfoData.area=param.province+param.city+param.area+param.street
				this.colonelInfoData.province = param.province;
				this.colonelInfoData.city = param.city;
				this.colonelInfoData.region = param.area;
				// 获取到传过来的 省 市 区 县数据
				console.log(param);
				// 选择完毕后隐藏
				this.popup = false;
			},
			conceal(param) {
				this.colonelInfoData=param
				this.$refs.region.close()
			},
			//获取图片路径
			geturl(param){
				this.colonelInfoData.storeUrl=param.imageurl
				console.log("***********")
				console.log(param)
			},
			getfronturl(param){
				this.colonelInfoData.idCardFrontUrl=param.imageurl
				console.log("***********")
				console.log(param)
			},
			getrevurl(param){
				this.colonelInfoData.idCardReverseUrl=param.imageurl
				console.log("***********")
				console.log(param)
			},
			chooseArea() {
			    this.$refs.region.open()
			},
			//地图选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: (data) => {
						console.log("***************")
						console.log(data);
						this.colonelInfoData.addressName = data.address;
						this.colonelInfoData.mapAddress = data.address;
						this.colonelInfoData.latitude= data.latitude;
						this.colonelInfoData.longitude = data.longitude;
					}
				})
			},
			
			//提交
				confirm() {
					console.log("***********")
					let data = this.colonelInfoData;
					console.log(data);
					if (!data.name) {
						this.$api.msg('请填写团长姓名');
						return;
					}
					if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(data.idCardNumber)) {
						this.$api.msg('请输入正确的身份证号码');
						return;
					}
					if (!data.address) {
						this.$api.msg('请填写店铺详细地址');
						return;
					}
					if (!data.mapAddress) {
						this.$api.msg('请在地图上选择店铺地址');
						return;
					}
					// if (!data.storeUrl) {
					// 	this.$api.msg('请上传营业执照');
					// 	return;
					// }
					if (!data.storeName) {
						this.$api.msg('请填写店铺名称');
						return;
					}
					if (!data.idCardFrontUrl) {
						this.$api.msg('请上传团长身份证正面');
						return;
					}
					if (!data.idCardReverseUrl) {
						this.$api.msg('请上传团长身份证反面');
						return;
					}
					if (!data.latitude) {
						this.$api.msg('请填写店铺所在地精度');
						return;
					}
					if (!data.longitude) {
						this.$api.msg('请填写店铺所在地纬度');
						return;
					}
			
			AddColonel(data).then(data=>{
				this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
				uni.navigateBack()
			 })
				},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 230upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>